// vue basic demo
<template>
  <div class = 'VueBasic'>
    <!-- 1: 绑定 HTML Class. 最后结果为<div class="static active"></div> -->
    <div class="static"
         v-bind:class="{ active: isActive, 'text-danger': hasError }">test bind class
    </div>

    <!-- 2: 绑定 HTML Class. 对象绑定 最后结果为<div class="static active"></div> -->
    <div v-bind:class="classObject">对象绑定</div>

    <!--3: 数组语法-->
    <div v-bind:class="[activeClass, errorClass]">数组语法</div>

    <!-- 4: 组件语法 -->
    <my-component class="baz boo"></my-component>

    <!--绑定内联样式-->
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">绑定内联样式: 对象语法</div>

    <!--自动添加前缀-->
    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">自动添加前缀</div>

  </div>
</template>

<script>
import Vue from 'vue'

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

export default {
  name: 'VueBasic',
  data() {
    return {
      isActive: true,
      hasError: false,
      error: null,
      activeClass: 'active',
      errorClass: 'text-danger',
      activeColor: 'red',
      fontSize: 30,
    }
  },
  computed: {
    classObject : function () {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal'
      }
    }
  }

}

</script>

